import { onBeforeUnmount, onMounted, ref } from 'vue';


export const useResize = () => {

    // 定义响应式变量 以存储页面缩放高度
    const bodyHeight = ref(window.innerHeight);
    const bodyWidth = ref(window.innerWidth);

    const getInnerHeight = () => {
        bodyHeight.value = window.innerHeight;
        bodyWidth.value = window.innerWidth;
    }
    
    // 添加页面缩放监听
    onMounted(() => {
        window.addEventListener('resize', getInnerHeight);
    });
    // 移除页面缩放监听
    onBeforeUnmount(() => {
        window.removeEventListener('resize', getInnerHeight);
    });

    return { bodyHeight, bodyWidth }
}